<template>
  <el-card>
    <template #header><h2>客户管理</h2></template>

    <el-form :inline="true" :model="filters" class="toolbar">
      <el-form-item label="客户名">
        <el-input
          v-model="filters.name"
          placeholder="输入客户名，可空"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchCustomers">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="customers" stripe style="margin-top:16px;">
      <el-table-column prop="name" label="客户名" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="building" label="楼号" />
      <el-table-column prop="roomNumber" label="房号" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button
            size="small"
            type="primary"
            @click="viewRecords(row.id, row.name)"
          >查看护理记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page.current"
      :page-size="page.size"
      :total="page.total"
      @current-change="fetchCustomers"
      background
      layout="prev, pager, next, jumper, ->, total"
      style="margin-top:16px; text-align:right;"
    />
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'
import qs from 'qs'

const axios = inject('axios')
const router = useRouter()

// 搜索条件
const filters = reactive({ name: '' })
// 客户列表
const customers = ref([])
// 分页
const page = reactive({ current: 1, size: 10, total: 0 })

async function fetchCustomers() {
  const { data: resp } = await axios.post(
    '/CustomerController/queryAll',
    qs.stringify({ name: filters.name, cur: page.current, number: page.size })
  )
  customers.value = resp.data
  page.total = resp.total
}

// 查看护理记录：用 path + query 传参
function viewRecords(customerId, customerName) {
  router.push({
    path: '/RecordDetail',
    query: { customerId, name: customerName }
  })
}

onMounted(fetchCustomers)
</script>

<style scoped>
.toolbar { margin-bottom: 16px; }
</style>
